﻿body {
	margin: 0;
	padding: 0;
	background: #f4f4f4;
	font: 14px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.link { text-align: center; clear: both; padding: 20px 0; }
.link a { color: #333333; }

.wrapper {
	width: 960px;
	margin: 50px auto;
}

/* Form 1 style */

.form1 {
	width: 450px;
	float: left;
	background: #fff;
	color: #777;
	-webkit-box-shadow: 0px 0px 8px 2px #d1d1d1;
	-moz-box-shadow: 0px 0px 8px 2px #d1d1d1;
	box-shadow: 0px 0px 8px 2px #d1d1d1; 
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px; 
	overflow: hidden;
}

.formtitle {
	padding: 10px;
	line-height: 16px;
	font-size: 13px;
	text-shadow: -1px -1px #e87c19;
	color: #fff;
	font-weight: bold;
	border-bottom: 1px solid #eb8d19;
	width: 430px;
	background: #ffbd27; /* Old browsers */
	background: -moz-linear-gradient(top, #ffbd27 0%, #ffb119 50%, #ff9d19 51%, #ff9d19 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbd27), color-stop(50%,#ffb119), color-stop(51%,#ff9d19), color-stop(100%,#ff9d19)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd27', endColorstr='#ff9d19',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* W3C */
}

.input {
	width: 410px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
	margin: 20px;
	overflow: hidden;
}

.CheckboxInput {
	width: 410px;
	border-bottom: 0;
	margin-bottom: 10px;
	overflow: hidden;
}

.inputtext {
	float: left;
	line-height: 18px;
	height: 35px;
	font-size: 14px;
	width: 120px;
}

.inputcontent {
	float: left;
	font-size: 14px;
	width: 290px;
	height: 30px;
}

.DDLcontent {
	float: left;
	font-size: 14px;
	width: 290px;
	border: 1px solid #c7c7c7;
}

.inputcontent input {
	padding: 5px;
	font-size: 14px;
	height: 18px;
	width: 200px;
	line-height: 18px;
	border: 1px solid #c7c7c7;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	color: #777;
}

.inputcontent a {
	color: #0084ff;
	font-size: 14px;
	text-decoration: none;
	line-height: 12px;
}

.nobottomborder {
	border-bottom: 0;
}

.buttons {
	background: #f1f1f1;
	border-top: 1px solid #ddd;
	padding: 15px;
	height: 34px;
}

.greybutton {
	background: #e1e1e1; /* Old browsers */
	background: -moz-linear-gradient(top, #e1e1e1 0%, #bababa 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(100%,#bababa)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* W3C */ 
	border: 1px solid #bababa;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px; 
	line-height: 20px;
	font-size: 14px;
	padding: 6px 12px;
	color: #fff;
	text-shadow: -1px -1px #bababa;
	float: right;
	margin-left: 10px;
	cursor: pointer;
}

.greybutton:hover{
	background: #bababa; /* Old browsers */
	background: -moz-linear-gradient(top, #bababa 0%, #e1e1e1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* W3C */ 
}

.orangebutton {
	background: #ffc339; /* Old browsers */
	background: -moz-linear-gradient(top, #ffc339 0%, #ff9b19 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc339), color-stop(100%,#ff9b19)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc339', endColorstr='#ff9b19',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* W3C */
	border: 1px solid #ff9b19;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px; 
	line-height: 20px;
	font-size: 14px;
	padding: 6px 12px;
	color: #fff;
	text-shadow: -1px -1px #ff9b19;
	float: right;
	margin-left: 10px;
	cursor: pointer;
}

.orangebutton:hover{
	background: #ff9b19; /* Old browsers */
	background: -moz-linear-gradient(top, #ff9b19 0%, #ffc339 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9b19), color-stop(100%,#ffc339)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9b19', endColorstr='#ffc339',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* W3C */
}

/* ----------------------------------------------  Reset form elements ---------------------------------------------- */
	
	input, select, textarea {
		margin:0; padding:0; font-size:0.85em; outline:none;
		font-family:inherit;	
		-moz-box-sizing:border-box; /* Firefox */
		-webkit-box-sizing:border-box; /* Safari */
		box-sizing:border-box;}

/* ----------------------------------------------  Inputs, textareas and selects  ---------------------------------------------- */


	input[type="text"], textarea, select, div.styled, input[type="file"] {  
		width:12em; border-radius:2px; border: solid 1px #ccc; padding:0.4em;}
	
	div.styled, select, input[type="submit"], input[type="button"], 
	input[type="file"]:after {
		background: white url(../images/formelements-select.png) no-repeat center right;
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);}	
	
	input[type="text"], textarea, input[type="file"] { 
		background-color: #f5f5f5;
		-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
		box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);}
	
		.ie9 input[type="text"] { line-height:normal; } /* Get the stuff to line up right */
	
	textarea { width:100%; height:10em; }
	
/* ----------------------------------------------  Select menu  ---------------------------------------------- */
	
	/* For IE and Firefox */

	div.styled { overflow:hidden; padding:0; margin:0; }
		
		.ie7 div.styled {border:none;}

	div.styled select {	
		width:115%; background-color:transparent; background-image:none;
		-webkit-appearance: none; border:none; box-shadow:none;}
		
		.ie7 div.styled select {
			width:100%; background-color:#fff; border: solid 1px #ccc; 
			padding:0.3em 0.5em;}	
	
/* ----------------------------------------------  Checkboxes and Radio inputs  ----------------------------------------------  */	
		
	input[type="radio"], 
	input[type="checkbox"] { position: absolute; left: -999em; }
		
	label:before { 
		display: inline-block; position: relative; top:0.25em; left:-2px; 
		content:''; width:25px; height:25px;
		background-image:url(../images/formelements.png); }
	
	input[type="checkbox"] + label:before { background-position: 0 -25px;}
	input[type="checkbox"]:checked + label:before {background-position: 0 0 ; }
		 
	input[type="radio"] + label:before { background-position: -25px -25px;}	 	
	input[type="radio"]:checked + label:before { background-position: -25px 0;}
	
		/* Remove the custom styling for IE 7-8 */
		
		.ie8 label:before { display:none; content:none; }
		
		.ie8 input[type="checkbox"],
		.ie8 input[type="radio"],
		.ie7 input[type="checkbox"],
		.ie7 input[type="radio"]{ 
			position: static; left:0; }
		
		.ie8 input[type="checkbox"],
		.ie8 input[type="radio"] { 
			position:relative; top:5px; margin-right:0.5em;}	
			
	input[type="text"]:focus, textarea:focus {
		border-color:#000;
		}
				
/* Form 2 Style */

.form2 {
	width: 450px;
	float: right;
	background: #fff;
	color: #777;
	-webkit-box-shadow: 0px 0px 8px 2px #d1d1d1;
	-moz-box-shadow: 0px 0px 8px 2px #d1d1d1;
	box-shadow: 0px 0px 8px 2px #d1d1d1; 
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px; 
	overflow: hidden;
}

.textarea {
	padding: 5px;
	height: 100px;
	width: 200px;
	line-height: 18px;
	border: 1px solid #c7c7c7;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	color: #777;
}

.inputtextbox {
	width: 410px;
	margin-bottom: 10px;
	margin: 20px;
	overflow: hidden;
}

.inputtextbox .inputcontent {
	height: 114px;
}